<template>
  <!-- 待处理线索详情页 / 已处理线索详情页 -->
  <view class="clueDetails">
    <view class="wrapper" :class="options.index == 0 ? 'wrapperHeight' : ''">
      <view class="wrapper-item">
        <view class="time-title">
          <image :src="baseImgUrl + 'tcircle.png'"></image>
          <view>{{ detail.createTime }}</view>
        </view>

        <view class="clue-line">
          <view class="clue-content">
            <view class="clue-title">{{ detail.clueTitle }}</view>
            <view class="clue-context">
              <view style="min-width: 120rpx; margin-left: 0; color: #a2a2a2">线索类型:</view>
              <view class="item-right-value">{{
                get_dict_type(clue_type, detail.clueType)
              }}</view>
            </view>
            <view class="clue-context">
              <view style="min-width: 120rpx; margin-left: 0; color: #a2a2a2">发现时间:</view>
              <view class="item-right-value">{{ detail.discoveryTime }}</view>
            </view>
            <view class="clue-context">
              <view style="min-width: 120rpx; margin-left: 0; color: #a2a2a2">线索地点:</view>
              <view class="item-right-value">{{ detail.discoverySite }}</view>
            </view>
            <view class="clue-context">
              <view style="min-width: 120rpx; margin-left: 0; color: #a2a2a2">上报单位:</view>
              <view class="item-right-value">{{ detail.policeAgencyName }}</view>
            </view>
            <view class="clue-context">
              <view style="min-width: 120rpx; margin-left: 0; color: #a2a2a2">线索描述:</view>
              <view class="item-right-value">{{ detail.clueDescription }}</view>
            </view>
            <view class="clue-context" style="display: flex">
              <view style="min-width: 120rpx; margin-left: 0; color: #a2a2a2">线索图片:</view>

              <view class="picture item-right-value" v-if="imageList.length">
                <image v-for="(img, imgIndex) in imageList" :key="imgIndex" :src="imgPrefix + img" mode="aspectFill"
                  @click="pvwImage([imgPrefix + img])"></image>
              </view>
              <view v-else class="item-right-value">无</view>
            </view>

            <view class="clue-context" v-if="audioSrc" style="align-items: center;">
              <view style="min-width: 120rpx; margin-left: 0; color: #a2a2a2">音频信息:</view>
              <view class="audio-wrapper item-right-value" v-if="audioSrc">
                <view class="left-i">
                  <image v-if="play == false" class="start-img" :src="baseImgUrl + 'audio-start.png'"
                    @click="playAudio">
                  </image>
                  <image v-else class="pause-img" :src="baseImgUrl + 'audio-pause.png'" @click="pauseAudio"></image>
                </view>
                <view class="right-i">
                  <!-- <div class="a-item">
                    <div class="a-item-left">
                      <div class="audio-text">音频信息</div>
                      <div class="audio-size">{{ formatBytes(fileSize) }}</div>
                    </div>
                  </div> -->
                  <div class="a-item">
                    <div class="a-item-time">
                      <div>{{ formatMilliseconds(current) }}</div>
                      <div style="flex: 1;margin: 0 8rpx;">
                        <u-line-progress :percentage="percentage" activeColor="#2488F5" :height="5" :showText="false" />
                      </div>
                      <div>{{ formatMilliseconds(duration) }}</div>
                    </div>
                  </div>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="wrapper-item" v-if="detail.handleStatus >= 1 && detail.claimStatus == 2">
        <view class="time-title">
          <image :src="baseImgUrl + 'tcircle.png'"></image>
          <view>{{ detail.claimTime }}</view>
        </view>

        <view class="clue-line">
          <view class="clue-content">
            <view class="clue-title">处理民警</view>
            <view class="clue-context">
              民警姓名:<view class="item-right-value">{{ detail.policeName }}</view>
            </view>
            <view class="clue-context">
              民警警号:<view class="item-right-value">{{ detail.policeUserNo }}</view>
            </view>
            <view class="clue-context">
              联系电话:<view class="item-right-value">{{ detail.policeMobile }}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="wrapper-item" v-if="detail.handleStatus == 2 && detail.claimStatus == 2">
        <view class="time-title">
          <image :src="baseImgUrl + 'tcircle.png'"></image>
          <view>{{ detail.updateTime }}</view>
        </view>

        <view class="clue-line">
          <view class="clue-content">
            <view class="clue-title">排查详情</view>
            <view class="clue-context">
              处理时间:<view class="item-right-value">
                {{ detail.processingTime ? moment(detail.processingTime).format("YYYY/MM/DD HH:mm") : "" }}
              </view>
            </view>
            <view class="clue-context">
              <view style="min-width: 120rpx; margin-left: 0; color: #a2a2a2">处理措施:</view>
              <view class="item-right-value">{{ detail.policeHandleMemo }}</view>
            </view>
            <view class="clue-context">
              是否移交:<view class="item-right-value">{{
                detail.transferStatus == 1 ? "是" : "否"
              }}</view>
            </view>
            <view class="clue-context" v-if="detail.transferStatus == 1">
              接收单位:<view class="item-right-value">{{ detail.transferDepartment }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="btns" v-if="options.index == 0">
      <button class="remove-btn" type="primary" style="width: 100%" @click="detailHandle">
        删除
      </button>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    pendingProcessingDetail,
    clueReportingDelete
  } from "@/api/home.js";
  import {
    ajaxGetDictItems
  } from "@/api/api.js";
  import {
    imagesPathList
  } from "@/api/myself.js";
  import {
    handleClickRouter,
    Toast,
    navBack,
    pvwImage,
    formatters,
    formatMilliseconds,
    formatBytes
  } from "@/utils/util.js";
  import moment from '@/utils/moment.js'
  import {
    nextTick
  } from "vue";

  export default {
    name: "clueDetails",
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        baseURL: this.$baseURL,
        imgPrefix: uni.getStorageSync("imgPrefix"),
        options: {},
        detail: {},
        imageList: [],
        clue_type: [],

        // 录音
        baseImgUrl: this.$baseImgUrl,
        play: false,
        // 百分比
        percentage: 0,
        // 实例化音频组件
        audioContext: null,
        // 总时长
        duration: 0,
        // 文件大小
        fileSize: 0,
        // 当前播放时间
        current: 0,
        audioSrc: null,
        intervalID: null
      };
    },
    onReady() {
      this.initAudio()
    },
    onLoad(options) {
      this.options = JSON.parse(decodeURIComponent(options.data));

      if (this.options.index != 0) {
        uni.setNavigationBarTitle({
          title: "已处理线索详情页",
        });
      }
      this.getList();
    },
    destroyed() {
      this.audioContext.destroy()
      clearInterval(this.intervalID)
    },
    methods: {
      handleClickRouter,
      navBack,
      pvwImage,
      formatters,
      moment,
      detailHandle() {
        uni.showModal({
          title: "删除",
          content: "删除后不可恢复，请谨慎操作！",
          confirmColor: "#2488F5",
          success: (res) => {
            if (res.confirm) {
              clueReportingDelete({
                id: this.options.id
              }).then((res) => {
                if (res.code == 200) {
                  Toast("删除成功");
                  uni.setStorageSync("leadReporting", true);
                  navBack();
                  return;
                }
                Toast(res.message);
              });
            }
          },
        });
      },

      async getList() {
        let {
          result
        } = await pendingProcessingDetail({
          id: this.options.id
        });
        this.detail = result;
        const {
          leadReportingAudio
        } = result
        if (leadReportingAudio) {
          this.audioContext.src = this.imgPrefix + leadReportingAudio;
          this.audioSrc = this.imgPrefix + leadReportingAudio;
        }

        // this.duration = event.duration;
        // this.fileSize = event.fileSize;

        let {
          result: imgPath
        } = await imagesPathList({
          bizId: this.options.id,
          bizType: 19,
        });
        this.imageList = imgPath.map((v) => v.path);

        let {
          result: clue_type
        } = await ajaxGetDictItems({
          code: "clue_type"
        });
        this.clue_type = clue_type;
      },

      get_dict_type(list, type) {
        let res = list.find((item) => item.value == type);
        if (res && res.title) {
          return res.title;
        } else {
          return "暂无";
        }
      },

      // 初始化 音频
      initAudio() {
        this.audioContext = wx.createInnerAudioContext();
        this.audioContext.onPlay(() => {
          console.log("开始播放");
        });
        this.audioContext.onError((err) => {
          console.log(err);
        });
        this.audioContext.onEnded(() => {
          console.log("播放结束");
          this.percentage = 100;
          this.current = 0;
          this.play = false;
        });
        this.audioContext.onTimeUpdate(() => {
          console.log("音频进度条发生更新", this.audioContext);
          this.current = this.audioContext.currentTime * 1000;
          if (!this.duration) {
            this.duration = this.audioContext.duration * 1000;
          }
          if (this.duration > 0) {
            if (this.current === this.duration) {
              this.percentage = 100;
              return;
            }
            // this.percentage = parseInt(((parseInt(value) / parseInt(this.duration)) * 100).toFixed(2))
            // 计算百分数，也就是进度条的长度
            this.percentage = Number(
              ((this.current / this.duration) * 100).toFixed(4)
            );
          }
        });

        this.audioContext.onCanplay(() => {
          this.audioContext.volume = 0;
          this.audioContext.play();
          this.audioContext.pause();
          this.audioContext.volume = 1;
          // 获取音频的播放时长（单位：秒）
          this.intervalID = setInterval(() => {
            if (this.audioContext.duration !== 0) {
              clearInterval(this.intervalID); // 清除定时器
              this.duration = this.audioContext.duration * 1000;
            }
          }, 100)
        });
      },
      formatMilliseconds,
      formatBytes,
      start() {
        // 开始录音
      },
      end(event) {
        // 结束录音并处理得到的录音文件
        // event中，app端仅有tempFilePath字段，微信小程序还有duration和fileSize两个字段
        // 录音结束之后给 音频组件赋值
        this.audioContext.src = event.tempFilePath;
        this.audioSrc = event.tempFilePath;
        this.duration = event.duration;
        this.fileSize = event.fileSize;
        this.current = 0;
        this.percentage = 0;
      },
      cancel() {
        // 用户取消录音
      },

      // 播放音频
      playAudio() {
        this.play = true;
        this.percentage = 0;
        this.audioContext.play();
      },
      pauseAudio() {
        this.play = false;
        this.audioContext.pause();
      },
    },
  };
</script>

<style>
  page {
    background-color: #f3f3f3 !important;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  .clueDetails {
    flex: 1;
    background: #f9f9f9;

    .wrapper {
      margin: 20rpx;
      overflow-y: auto;

      .wrapper-item {
        padding: 20rpx;
      }
    }

    .wrapperHeight {
      height: calc(100vh - 92px);
    }

    .time-title {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;

      image {
        margin-right: 15rpx;
        width: 20rpx;
        height: 20rpx;
      }
    }

    .clue-line {
      margin-left: 9rpx;
      border-left: 1rpx dotted #b2b2b2;
      padding-left: 16rpx;

      .clue-content {
        margin-top: 10rpx;
        padding: 20rpx 30rpx;
        background: #fff;

        .clue-title {
          font-weight: bold;
          font-size: 32rpx;
          color: #000000;
        }

        .clue-context {
          display: flex;
          margin-top: 24rpx;
          font-weight: 400;
          font-size: 26rpx;
          color: #a2a2a2;

          .item-right-value {
            font-weight: 500;
            font-size: 26rpx;
            color: #1a1a1a;
            margin-left: 10rpx;
          }
        }

        .picture {
          display: flex;
          flex-wrap: wrap; // zry

          image {
            display: block;
            margin-right: 9rpx;
            width: 192rpx;
            height: 216rpx;
          }

          &:nth-of-type(1) {
            margin-left: 10rpx;
          }

          image:nth-child(3n) {
            margin-right: 0;
          }
        }
      }
    }

    .btns {
      button {
        border-radius: 44rpx;
      }
    }

    // 录音组件

    .audio-wrapper {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 10rpx;
      background: #F8FCFF;
      border-radius: 60rpx 60rpx 60rpx 60rpx;
      border: 1rpx solid #F1F9FF;
      margin: 0 auto;

      .left-i {
        flex-shrink: 0;
        margin-right: 30rpx;

        .start-img,
        .pause-img {
          width: 52rpx;
          height: 52rpx;
        }
      }

      .right-i {
        flex: 1;

        .a-item {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .a-item-left {
            display: flex;

            .audio-text {
              font-weight: 500;
              font-size: 26rpx;
              color: #5F6576;
              margin-right: 10rpx;
            }

            .audio-size {
              font-weight: 400;
              font-size: 22rpx;
              color: #A1A4AE;
            }
          }

          .text-delete {
            font-weight: 400;
            font-size: 24rpx;
            color: #FF6D6D;
          }

          .a-item-time {
            display: flex;
            align-items: center;
            width: 100%;
            font-weight: 400;
            font-size: 22rpx;
            color: #A1A4AE;
            justify-content: space-between;
          }
        }
      }
    }
  }
</style>